/*
 * Copyright 2017 StreamSets Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.stage-library-pane {

  .stage-filter, .stage-search {
    padding: @defaultPadding @smallPadding 0 @smallPadding;
    width: 175px;
    //border-bottom: 1px solid #dedede;

    select, input {
      height: 25px;
    }

    .search-clear {
      position: absolute;
      right: 10px;
      top: 8px;
      bottom: 0;
      height: 14px;
      margin: auto;
      font-size: 14px;
      cursor: pointer;
      color: #ccc;

      &:hover {
        color: @streamsets-icon-btn-hover-color;
      }
    }
  }


  .stage-list-container {
    padding-top: @smallPadding;

    .stages-list {
      list-style: none;
      display: block;
      width: 180px;
      padding: 0;
      margin: 0;

      li {
        display: inline-block;
        width: 88px;
        height: 90px;
        float: left;
        position: relative;
        border-bottom: 1px solid #dedede;
        border-right: 1px solid #dedede;
        text-align: center;
        overflow: hidden;
        transition: all .2s linear 0;

        &:hover {
          box-shadow:inset 0 0 6px rgba(82,168,236,.6);
          opacity:1;
        }

        &.not-installed {
          opacity: 0.35;
        }

        a {
          display: block;
          width: 88px;
          height: 65px;
          position: relative;
          opacity: 1;
          background: no-repeat center center;
          background-origin: content-box;
          padding: 12px;
          background-size: contain;
          &:focus {
            outline: 0;
          }

          .beta-icon {
            position: absolute;
            top: 10px;
            left: 10px;
            height: 15px;
            width: 15px;
          }

          span {
            max-height: 28px;
            position: absolute;
            bottom: -20px;
            left: 7px;
            right: 7px;
            color: #383838;
            font-size: 12px;
            line-height: 14px;
            text-align: center;
            text-transform: capitalize;
            overflow: hidden;
          }

          .circle {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            font-size: 10px;
            color: white;
            line-height: 15.5px;
            text-align: center;
            display: block;
            top: 5px;
            left: 64px;
            font-weight: bolder;

            &.origin {
              background: @brand-info;
            }

            &.processor {
              background: @brand-warning;
            }

            &.destination {
              background: @brand-success;
            }

            &.executor {
              background: @brand-success;
            }

          }
        }
      }

    }
  }

}
